<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食 - 个人中心</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 防止内容溢出 */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        /* 确保容器不溢出 */
        .container {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
        /* 确保网格布局不溢出 */
        .grid {
            width: 100%;
        }
        /* 长文本自动换行 */
        p, span, div {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800 pb-16">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-xl font-bold text-green-600">个人中心</h1>
            <div>
                <button class="p-2">
                    <i class="fas fa-cog text-gray-600"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 用户信息卡片 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-16 h-16 rounded-full mr-4">
                <div class="flex-1">
                    <h2 class="text-lg font-semibold">张小萌</h2>
                    <p class="text-sm text-gray-500">zxm@example.com</p>
                </div>
                <button class="text-green-600">
                    <i class="fas fa-pen"></i>
                </button>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100 grid grid-cols-3 gap-4 text-center">
                <div>
                    <div class="text-xl font-medium">154</div>
                    <div class="text-xs text-gray-500">连续打卡</div>
                </div>
                <div>
                    <div class="text-xl font-medium">458</div>
                    <div class="text-xs text-gray-500">记录总数</div>
                </div>
                <div>
                    <div class="text-xl font-medium">32</div>
                    <div class="text-xs text-gray-500">收藏食谱</div>
                </div>
            </div>
        </div>

        <!-- 健康数据卡片 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold">健康数据</h2>
                <button class="text-green-600">
                    <i class="fas fa-pen"></i>
                </button>
            </div>
            
            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-green-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-ruler-vertical text-green-600"></i>
                        </div>
                        <span>身高</span>
                    </div>
                    <span>165 cm</span>
                </div>
                
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-blue-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-weight text-blue-600"></i>
                        </div>
                        <span>体重</span>
                    </div>
                    <span>52 kg</span>
                </div>
                
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-purple-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-calendar-alt text-purple-600"></i>
                        </div>
                        <span>年龄</span>
                    </div>
                    <span>28 岁</span>
                </div>
                
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-venus-mars text-yellow-600"></i>
                        </div>
                        <span>性别</span>
                    </div>
                    <span>女</span>
                </div>
                
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-red-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-heartbeat text-red-600"></i>
                        </div>
                        <span>活动水平</span>
                    </div>
                    <span>中等活跃</span>
                </div>
                
                <div class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-indigo-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-chart-line text-indigo-600"></i>
                        </div>
                        <span>BMI</span>
                    </div>
                    <span>19.1 (正常)</span>
                </div>
            </div>
        </div>

        <!-- 营养目标卡片 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold">营养目标</h2>
                <button class="text-green-600">
                    <i class="fas fa-pen"></i>
                </button>
            </div>
            
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <div class="flex items-center">
                            <div class="bg-orange-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-fire-alt text-orange-600"></i>
                            </div>
                            <span>每日热量</span>
                        </div>
                        <span>2000 千卡</span>
                    </div>
                    <div class="relative pt-1">
                        <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                            <div style="width: 75%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"></div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <div class="flex items-center">
                            <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-bread-slice text-yellow-600"></i>
                            </div>
                            <span>碳水化合物</span>
                        </div>
                        <span>50% (250g)</span>
                    </div>
                    <div class="relative pt-1">
                        <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                            <div style="width: 50%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"></div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-drumstick-bite text-blue-600"></i>
                            </div>
                            <span>蛋白质</span>
                        </div>
                        <span>25% (125g)</span>
                    </div>
                    <div class="relative pt-1">
                        <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                            <div style="width: 25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <div class="flex items-center">
                            <div class="bg-red-100 p-2 rounded-lg mr-3">
                                <i class="fas fa-cheese text-red-600"></i>
                            </div>
                            <span>脂肪</span>
                        </div>
                        <span>25% (56g)</span>
                    </div>
                    <div class="relative pt-1">
                        <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                            <div style="width: 25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class="w-full mt-4 py-2 text-green-600 border border-green-600 rounded-lg flex items-center justify-center">
                <i class="fas fa-sliders-h mr-2"></i>
                <span>调整营养目标</span>
            </button>
        </div>

        <!-- 功能列表 -->
        <div class="bg-white rounded-lg shadow-sm mb-6">
            <!-- 我的食谱 -->
            <div class="p-4 border-b border-gray-100">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-green-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-utensils text-green-600"></i>
                        </div>
                        <span>我的收藏</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 饮食记录 -->
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center justify-between p-3 border-b border-gray-100">
                    <div class="flex items-center">
                        <i class="fas fa-history text-gray-500 w-6"></i>
                        <span class="ml-3">饮食记录历史</span>
                    </div>
                    <a href="record-history.html" class="text-gray-400">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <!-- 营养报告 -->
            <div class="p-4 border-b border-gray-100">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-purple-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-chart-pie text-purple-600"></i>
                        </div>
                        <span>营养报告</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 饮食习惯 -->
            <div class="p-4 border-b border-gray-100">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-brain text-yellow-600"></i>
                        </div>
                        <span>饮食习惯分析</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
        </div>

        <!-- 设置列表 -->
        <div class="bg-white rounded-lg shadow-sm mb-6">
            <!-- 账号设置 -->
            <div class="p-4 border-b border-gray-100">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-gray-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-user-cog text-gray-600"></i>
                        </div>
                        <span>账号设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 通知设置 -->
            <div class="p-4 border-b border-gray-100">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-gray-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-bell text-gray-600"></i>
                        </div>
                        <span>通知设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 隐私设置 -->
            <div class="p-4 border-b border-gray-100">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-gray-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-shield-alt text-gray-600"></i>
                        </div>
                        <span>隐私设置</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 帮助与反馈 -->
            <div class="p-4 border-b border-gray-100">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-gray-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-question-circle text-gray-600"></i>
                        </div>
                        <span>帮助与反馈</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 关于 -->
            <div class="p-4">
                <a href="#" class="flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="bg-gray-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-info-circle text-gray-600"></i>
                        </div>
                        <span>关于</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
        </div>

        <!-- 退出按钮 -->
        <button class="w-full py-3 text-red-600 border border-red-600 rounded-lg mb-6">
            退出登录
        </button>
    </main>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around items-center py-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="food-search.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-search text-xl"></i>
                <span class="text-xs mt-1">搜索</span>
            </a>
            <a href="analysis.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-chart-pie text-xl"></i>
                <span class="text-xs mt-1">分析</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-green-600">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </footer>
</body>
</html> 